<!--图书列表（管理员）-->
<!--管理员登陆后跳到此页面-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书列表（管理员）</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="/static/js/order.js"></script>
    <style>
        .container1 {
            text-align: center;
            position: relative;
        }

        .container1 table {
            margin: 0 auto;
            top: 20px;
            font-size: 15px;
            width: 80%;
            border-collapse: collapse;
        }

        .container1 table caption {
            font-size: 25px;
            font-weight: bold;
            margin: 1em 0;
        }

        .container1 table thead,
        .search-button {
            background-color: #008c8c;
            color: #fff;
        }

        .container1 table tbody tr:nth-child(odd) {
            background-color: #eee;
        }

        th,
        td {
            border: 1px solid #999;
            text-align: center;
            padding: 20px 0;
        }

        table tbody tr:hover {
            background-color: #ccc;
        }

        table tbody tr td:first-child {
            color: #f40;
        }

        .search-text {
            width: 150px;
            height: 25px;
            border-radius: 10px;
        }

        .search-button {
            width: 50px;
            height: 30px;
            border-radius: 10px;
        }

        .search {
            position: absolute;
            right: 140px;
            top: 29px;
            font-size: 10px;
        }

        td button {
            background-color: rgb(0, 140, 140);
            color: #fff;
            font-weight: bold;
            border-radius: 10px;
            width: 85px;
            height: 30px;
        }

        #confirm-dialog {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9999;
        }

        /* 对话框 */
        .dialog-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            border: 1px solid #ccc;
            padding: 20px;
            text-align: center;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }

        .dialog-content1 {
            position: relative;
            right: 10px;
            bottom: 1px;
            /*transform: translate(-50%, -50%);*/
            /*background-color: white;*/
            /*border: 1px solid #ccc;*/
            /*padding: 20px;*/
            text-align: right;
            /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);*/
        }
        /*订单详情*/
        .order-details {
            position: absolute;
            width: 1000px;
            /*height: 700px;*/
            top: 70%;
            left: 8%;
            /*transform: translate(-50%, -50%);*/
            background-color: white;
            border: 1px solid #ccc;
            padding: 20px;
            text-align: center;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }

        /* 确认按钮和取消按钮 */
        .confirm-button, .cancel-button ,.confirm-button1{
            padding: 5px 10px;
            border: none;
            background-color: #eee;
            color: #333;
            cursor: pointer;
            margin: 5px;
        }

        .confirm-button:hover, .cancel-button:hover,.confirm-button1:hover {
            background-color: #ccc;
        }

        .sidebar {
            flex-shrink: 0;
            width: 200px;
            background-color: #333;
            color: #fff;
            height: 100%;
            padding: 20px;
            box-sizing: border-box;
            position: fixed;
        }

        .sidebar1 {
            flex-shrink: 0;
            width: 200px;
            background-color: #333;
            color: #fff;
            height: 100%;
            padding: 20px;
            box-sizing: border-box;
        }

        .page-wrapper {
            display: flex;
            flex-direction: row;
            height: 100%;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
        .main-content {
            flex-grow: 1;
            padding: 20px;
            box-sizing: border-box;
        }
        .menu-item {
            display: block;
            padding: 10px;
            margin: 10px 0;
            background-color: #444;
            color: #fff;
            border-radius: 5px;
            text-decoration: none;
            font-size: 18px;
            box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
            transition: all 0.2s ease;
            cursor: pointer;
        }

        .menu-item:hover {
            background-color: #555;
        }
    </style>


<script>
    var base64 = "";

    function uploadImage() {
        console.log("here start function");
        var file = document.getElementById("imageUpload").files[0];
        var reader = new FileReader();
        var str = document.getElementById("uploadedImage").src;
        reader.onloadend = function () {
            base64 = reader.result.replace(/^data:image\/(png|jpg|jpeg);base64,/, "");
            document.getElementById("uploadedImage").src = reader.result;
            document.getElementById("uploadedImage").style.display = "block";
            console.log("图片")
            // console.log(base64);
            document.getElementById("imageUpload").setAttribute('type', 'text');
            base64 = reader.result;
            console.log(base64)
            $("#imageUpload").val(base64);
            // $("#imageUpload").attr("value",base64);
            // document.getElementById("imageUpload").value=base64;
            //test_img.value = base64;
            console.log(document.getElementById("imageUpload").value);
            // send base64 to server
        }
        reader.readAsDataURL(file);
    }

    $(function () {
        $('#submit').on('click',function (){
            $.ajax({
                type: "post",
                url: "/user/base64",
                data: {"bid": 3,"base64": base64},
                dataType: "json",
                success: function (data) {

                },
                error: function (data) {
                    alert("获取数据出错！");
                }
            })
        })

    })

</script>

</head>


<body>

<form action="/base64" method="post">
    <input type="file" id="imageUpload" onchange="uploadImage()" name="cover">
    <img id="uploadedImage" name="cover">
    <button id="submit">提交</button>
</form>

<!--图书馆管理系统页面-->
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">资料室图书管理系统</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="{{ url_for('register.register') }}"> 注册 <span class="sr-only">(current)</span></a></li>

      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="学号">
        </div>
        <button type="submit" class="btn btn-default">登录</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
<!--        <li><a href="#">godlover</a></li>-->
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多操作 <span class="caret"></span></a>
          <ul class="dropdown-menu">

            <li><a href="{{ url_for('user.index') }}">注销</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="container">
    <div class="row">
        <div class="col-md-2">
            <div class="list-group">
                <a href="#" class="list-group-item active">图书列表</a>
                <a href="{{url_for('BooksOfLent.lent')}}" class="list-group-item">已借出的书</a>
                <a href="{{url_for('BorrowerInformation.borrower')}}" class="list-group-item">借阅人信息</a>
                <a href="{{url_for('BorrowerInformation.borrower')}}" class="list-group-item">管理员信息</a>
            </div>
        </div>
        <div class="col-md-10">
            <div class="panel panel-primary">
              <div class="panel-heading clearfix">
                <h3 class="panel-title">图书馆管理系统<span class="glyphicon glyphicon-leaf pull-right"></span></h3>
              </div>
              <div class="panel-body">
                <a href="{{ url_for('AllBooks.add') }}" class="btn btn-success">新增</a>
                  <form class="form-inline pull-right" method="GET" action="{{ url_for('AllBooks.search') }}">
                      <div class="form-group">

                        <div class="input-group">

                          <input type="text" class="form-control" name="search" id="search" placeholder="编号">

                        </div>
                      </div>
                      <button type="submit" class="btn btn-primary">搜索</button>
                    </form>
                  <table class="table table-hover table-striped table-bordered" style="margin-top: 10px" id="ordertable">
                      <thead>
                          <tr>
                              <th>编号</th>
                              <th>书名</th>
                              <th>目录1</th>
                              <th>目录2</th>
                              <th>描述</th>
                              <th>借阅情况</th>
                              <th>时间</th>
                              <th>内容</th>
                              <th>封面</th>
                              <th>价格</th>
                              <th>分数</th>
                              <th>作者</th>
                              <th>出版社</th>
                              <th class="text-center">操作</th>
                          </tr>
                      </thead>
                      <tbody>
                      {% for book in books %}
                          <form method="POST">
                              <tr>
                                <td>{{ book.bid }}</td>
                                <td>{{ book.bname }}</td>
                                <td>{{ book.category1 }}</td>
                                <td>{{ book.category2 }}</td>
                                <td>{{ book.description }}</td>
                                <td>{{ book.isLoaned }}</td>
                                <td>{{ book.times }}</td>
                                <td>{{ book.content }}</td>
                                <td>{{ book.cover }}</td>
                                <td>{{ book.price }}</td>
                                <td>{{ book.score }}</td>
                                <td>{{ book.author }}</td>
                                <td>{{ book.pubUnit }}</td>
                              <td class="text-center">
                                  <button id={{ book.bid }} class="button-container" >编辑</button>
                                  <button name={{ book.bid }}  class="button-delete" >删除</button>
                              </td>
                          </tr>
                          </form>
                      {% endfor %}
                      </tbody>
                  </table>
              </div>
                </div>
        </div>


          </div>
</div>


<div id="ordertable-modify">
                        <div class="order-details">
                           <table class="table table-hover table-striped table-bordered" style="margin-top: 10px" id="modifyTable">
                      <thead>
                          <tr>
                              <th>编号</th>
                              <th>书名</th>
                              <th>目录1</th>
                              <th>目录2</th>
                              <th>描述</th>
                              <th>借阅情况</th>
                              <th>时间</th>
                              <th>内容</th>
                              <th>封面</th>
                              <th>价格</th>
                              <th>分数</th>
                              <th>作者</th>
                              <th>出版社</th>
                          </tr>
                      </thead>

                       <tbody >
                      {% for book in books1 %}
                          <form method="POST">
                              <tr>
                                <td>{{ book.bid }}</td>
                                <td>{{ book.bname }}</td>
                                <td>{{ book.category1 }}</td>
                                <td>{{ book.category2 }}</td>
                                <td>{{ book.description }}</td>
                                <td>{{ book.isLoaned }}</td>
                                <td>{{ book.times }}</td>
                                <td>{{ book.content }}</td>
                                <td>{{ book.cover }}</td>
                                <td>{{ book.price }}</td>
                                <td>{{ book.score }}</td>
                                <td>{{ book.author }}</td>
                                <td>{{ book.pubUnit }}</td>
                          </tr>
                          </form>
                      {% endfor %}
                      </tbody>

                  </table>
                            <div class="dialog-content1">
                                <button class="confirm-button1">确认</button>
                                <button class="cancel-button">返回</button>
                            </div>
                        </div>
                    </div>



</body>
</html>
